<template>
  <div class="grid-content bg-purple">
   
    <el-table :data="BaseDataList" style="width: 100%; margin-top: 30px" border>
      <el-table-column align="center" label="ID" width="220">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="名称">
        <template slot-scope="scope">
          {{ scope.row.chr_name }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope)">
            修改
          </el-button>
          <el-button type="danger" size="small" @click="handleDelete(scope)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page_index"
      :limit.sync="listQuery.page_size"
      @pagination="getList"
    />
  </div>
</template>
<script>
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination

import { BaseDataList } from "@/api/basedata";
export default {
  components: { Pagination },
  data() {
    return {
      total: 0,
      BaseDataList: [],
    };
  },
  props: {
    listQuery: {
      type: Object,
      default: function () {
        return {
          page_size: 20,
          page_index: 1,
          p_type_id: "",
          p_type_code: "",
          condition: {
            chr_name: "",
          },
        };
      },
    },
  },
  mounted() {
    //
  },
  methods: {
    getList() {
      BaseDataList(this.listQuery).then((res) => {
        this.BaseDataList = res.data.list;
        this.total = res.data.total;
      });
    },
  },

  watch: {
    listQuery: {
      //深度监听，可监听到对象、数组的变化
      handler(newV, oldV) {
        this.getList();
      },
      deep: true,
    },
  },
};
</script>

<style scoped>
</style>